<template>
    <div class="search-rd">
        <div class="search_form mb10">
            <a class="search_back" @click="back"><i></i></a>
            <div class="search_input">
               <i class="search_icon"></i>
                <input type="search" v-model.trim="query" autofocus="autofocus" placeholder="输入搜索关键字" name="keyWord" id="keyWord" ref="queryInput" @click="isSearching = true">
            </div>
            <a href="javascript:;" @click="searchSubmit">搜索</a>
        </div>
        <div class="prod-conditions" v-if="!isSearching">
            
        </div>
        <div class="searchTagBox" v-if="isSearching">
            <div class="searchHistory tagList" v-show="hasHistory">
                <div class="searchTop">
                    <span>搜索历史</span>
                    <i class="trash" @click="removeHistory"></i>
                </div>
                <ul>
                    <li class="searchTag" v-for="tag in localHistory" v-text="tag" @click="tagSearch(tag.name)"></li>
                </ul>
            </div>
            <div class="hotSearch tagList">
                <div class="searchTop">
                    <span>热搜</span>
                </div>
                <ul>
                    <li class="searchTag" v-for="tag in moreData" v-text="tag.name" @click="tagSearch(tag.name)"></li>
                </ul>
            </div>
        </div>
        <div class="prod-list" v-else>
            <scroll class="wrapper"
                :data="prodDatas"
                :pullup="pullup"
                @scrollToEnd="getData"
                >

                <ul class="prod_box">
                    <li v-for="data in prodDatas">
                        <a href="javascript:;" @click="prodDeatil(data.id)">
                            <div class="moreProdLoadImg">
                                <img :src="data.imgs[0].url" class="prod_img">
                            </div>
                            <span class="prod_name" v-text="data.name"></span>
                            <p class="prod_price">
                                <span class="now_price">￥<span class="big_price"  v-text="data.big_price"></span><span class="small_price" v-if="data.small_price">.{{data.small_price}}</span>
                                </span>
                            </p>
                        </a>
                    </li>
                    <my-spinner :isLoading="isLoading" :allLoaded="allLoaded"></my-spinner>
                </ul>

            </scroll>
            
        </div>
        
    </div>
</template>
<style scoped lang="scss">
    .search-rd{
        width:100%;
        height:100%;
        background-color: rgb(248,248,248);

        .prod-conditions{
            position: fixed;
            top:0;
            left:0;
            height:a(110px);
            padding: a(20px) 0;
            overflow: hidden;
        }

        .search_form {
            height:a(110px);
            padding: a(20px) 0;
            overflow: hidden;
            
            .search_back{
                display: inline-block;
                width:10%;
                padding-top: 5px;
                i{
                    display: inline-block;
                    width:20px;
                    height:20px;
                    background: url(~__assets/images/icon/search-back.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            .search_input {
                position: relative;
                float: left;
                width: 74%;

                .search_icon{
                    position: absolute;
                    left: 10px;
                    top: 10px;
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    background: url('~__assets/images/icon/search1.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            input[type=search] {
                font-size: 14px;
                width:100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                height: 35px;
                /*text-align: center;*/
                padding-left: 35px;
                border: 0;
                border-radius: 4px;
                background-color: #fff;
            }
        }

        .search_form a {
            font-size: 14px;
            width: 16%;
            float: left;
            height:35px;
            line-height: 35px;
            text-align: center;
            color: #000;
        }

        .searchTag{
            float:left;
            padding:8px;
            margin-right: 5px;
            margin-top:5px;
            border: 1px solid #e8e8e8;
            background-color: rgb(248,248,248);
        }

        .tagList{
            overflow: hidden;
            padding:10px;
        }

        .searchTop{
            position: relative;
            height:20px;
        }

        .trash{
            position: absolute;
            background: url('~__assets/images/icon/trash.png') no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            right:10px;
            width:18px;
            height:18px;
        }

        .searchResultBox .tab_nav{
            height:40px;
            /*line-height: 40px;*/
            background-color: #fff;
        }

        .prod-list{
            overflow: hidden;
            position: fixed;
            top: 55px;
            bottom:0;
            left: 0;
        }

        .prod_box{overflow: hidden;}
        .wrapper{height:100%;}
        .prod_box li{
            float: left;
            width: 50%;
            padding-bottom: 4px;
            position: relative;
            &:nth-child(odd) {
                padding-right: 2px;
            }
            // &:nth-child(even) {
            //     padding-left: 3px;
            // }
            .prod_img{
                width:100%;
                height:a(370px);
            }
            .prod_name{
                height: 33px;
                font-size: 13px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-word;
                color: #232326;
                margin-top: 5px;
                line-height: 17px;
                margin-bottom: 3px;
                padding: 0 4px;
            }
            .prod_price{
                height: 23px;
                font-size: 13px;
                overflow: hidden;
                .now_price{
                    color: #f23030;
                    display: inline-block;
                    padding: 0 5px 0 4px;
                    position: relative;
                    top: 1px;
                    height: 25px;
                    line-height: 25px;
                    .big_price{font-size: 16px;}
                    .small_price{font-size: 12px;}
                }
            }
        }
    }
</style>
<script>
    import scroll from '__cp/scroll'
    import mySpinner from '__cp/mySpinner'
    export default{
        name:'search-view',
        // props:['moreProduct'],
        components:{scroll,mySpinner},
        data(){
            return{
                page:0,
                allLoaded: false,
                isLoading:false,
                query:'',
                localHistory:[],
                hasHistory:false,
                isSearching:true,
                pullup:true,
                moreProductAllLoad:false,
                count:0,
                currntIndex:1,
                prodDatas:[],
                tavNav:[
                    {'name':'综合排序','info':{'id':1,'order':1},'checked':true},
                    {'name':'销量优先','info':{'id':2,'order':2},'checked':false},
                    {'name':'价格从高到低','info':{'id':3,'order':3},'checked':false}
                ],
                moreData:[
                    {name:"热搜1"},
                    {name:"热搜2"},
                    {name:"热搜3"},
                    {name:"热搜4"},
                ]
            }
        },
        mounted:function(){
            this.$nextTick(function () {
                this.getData();
            })
        },
        watch:{
            currntIndex(){
                //this.getMoreData()
            }
        },
        methods:{
            searchSubmit(){
                if(this.$refs.queryInput.value == ''){
                    this.mytoast('关键字不能为空!')
                    return 
                }
                
                let hadKeyWord = false;
                this.localHistory.forEach((obj,index)=>{
                    if(this.$refs.queryInput.value == obj){
                        hadKeyWord = true;
                    }
                });

                if(!hadKeyWord){
                    this.localHistory.push(this.$refs.queryInput.value)
                    localStorage.setItem('productQueryHistory',JSON.stringify(this.localHistory));
                }
                
                this.getLocalHistory();

                this.isSearching = false;
            },
            getData:function(){
                if(this.isLoading) return;
                this.isLoading = true;
                this.$axios.post('/search/getProductList',{page:this.page}).then((res)=>{
                    if(res.status == 200){
                        this.prodDatas = this.prodDatas.concat(res.data);
                        if(res.data.length < 10){
                            this.allLoaded = true;
                        } else {
                            this.page++;
                            this.isLoading = false;
                        } 
                    }
                })
                this.getLocalHistory();
            },
            tagSearch(name){
                this.$refs.queryInput.value = name;
                this.query = name;
                this.isSearching = false;
            },
            getLocalHistory(){
                if(JSON.parse(localStorage.getItem('productQueryHistory')))
                {
                    this.localHistory = JSON.parse(localStorage.getItem('productQueryHistory'))
                    this.hasHistory = true
                }else{
                    this.hasHistory = false
                    this.localHistory = []
                }
            },
            removeHistory(){
                localStorage.removeItem('productQueryHistory')
                this.getLocalHistory();                
                Toast({
                      message: '删除成功!',
                      duration: 2000
                });
            },
            back(){
                console.log(window.history)
                if (window.history.length <= 1) {
                    this.$router.push({path:'/index'})
                    return false
                } else {
                    this.$router.go(-1)
                }
                //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
                //如果上面都执行了 页面都跳走了，这个也就不用管了   
                setTimeout(() => {
                    this.$router.push({path:'/'})      
                },500)
            }
        }
    }

</script>
